<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%--
Created by IntelliJ IDEA.
User: zkt
Date: 2023/9/21
Time: 18:13
To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>首页</title>
        <link rel="stylesheet" href="./css/base.css">
        <link rel="stylesheet" href="./css/common.css">
        <link rel="stylesheet" href="./font/iconfont.css">
        <link rel="stylesheet" href="./css/01-header.css">
        <link rel="stylesheet" href="./css/02-banner.css">
        <link rel="stylesheet" href="./css/03-ms.css">
        <link rel="stylesheet" href="./css/04-course.css">
    </head>
    <body>

        <!-- 头部区域 开始 -->
        <div id="header" class="bgfff">
            <div class="nav-box">
                <!-- logo -->
                <h1 class="fl">
                    <a href="index.jsp">慕课网</a>
                </h1>
                <!-- 课程导航栏 -->
                <ul class="item-box fl">
                    <li>
                        <a href="#">免费课</a>
                    </li>
                    <li>
                        <a href="#">实战课</a>
                    </li>
                    <li>
                        <a href="#">体系课</a>
                    </li>
                    <li>
                        <a href="#">慕课教程</a>
                    </li>
                    <li>
                        <a href="#">专栏</a>
                    </li>
                    <li>
                        <a href="#">手记</a>
                    </li>
                    <li>

                    </li>
                    <img src="./images/new.png" alt="">
                </ul>
                <div class="login-area fr">
                    <a style="cursor: pointer" oncopy="return false" oncut="return false;"
                       onselectstart="return false" oncontextmenu="return false"
                       href="/judgeLogin">${userName}</a>|
                    <a style="cursor: pointer" oncopy="return false" oncut="return false;"
                       onselectstart="return false" oncontextmenu="return false"
                       href="/judgeLogout">${userJudge}</a>
                    <a style="cursor: pointer" oncopy="return false" oncut="return false;"
                       onselectstart="return false" oncontextmenu="return false"
                       href="/list" class="shop-cart">
                        <span style="cursor: pointer" oncopy="return false" oncut="return false;"
                              onselectstart="return false" oncontextmenu="return false"
                              class="iconfont icon-tianchongxing"></span>
                        我的课程
                    </a>
                    <a style="cursor: pointer" oncopy="return false" oncut="return false;"
                       onselectstart="return false" oncontextmenu="return false" href="/orderSkip" target="_blank">订单查询</a>
                </div>
            </div>
        </div>
        <!-- 头部区域 结束 -->

        <!-- 课程分类和轮播图 开始 -->
        <div id="banner">
            <div class="banner-box w">
                <div class="g-banner">
                    <div class="course-list fl">
                        <ul>
                            <li>
                                <span class="title">前端开发：</span>
                                <span class="sub-title">HTML5/Vue.js/Node.js</span>
                            </li>
                            <li>
                                <span class="title">后端开发：</span>
                                <span class="sub-title">Java / Python / Go</span>
                            </li>
                            <li>
                                <span class="title">移动开发：</span>
                                <span class="sub-title">Flutter / Android / iOS  </span>
                            </li>
                            <li>
                                <span class="title">计算机基础：</span>
                                <span class="sub-title">算法 / 数学 / 数据库</span>
                            </li>
                            <li>
                                <span class="title">前沿技术：</span>
                                <span class="sub-title">AI / 大数据 / 数据分析</span>
                            </li>
                            <li>
                                <span class="title">测试运维：</span>
                                <span class="sub-title">自动化测试 / 容器</span>
                            </li>
                            <li>
                                <span class="title">更多方向：</span>
                                <span class="sub-title">产品设计 / UI设计 / 游戏</span>
                        </ul>
                    </div>
                    <!-- 轮播图区域 -->
                    <div class="swiper fr">
                        <!-- 轮播图 -->
                        <a href="#" target="_blank"></a>

                        <!-- 左右切换按钮 -->
                        <div class="arrow arrow-l">
                            <span class="iconfont icon-angle-left"></span>
                        </div>
                        <div class="arrow arrow-r">
                            <span class="iconfont icon-angle-right"></span>
                        </div>

                        <!-- 切换圆点 -->
                        <ul class="circle-list">
                            <li></li>
                            <li></li>
                            <li class="current"></li>
                            <li></li>
                        </ul>

                    </div>
                </div>
                <div class="sys-class">
                    <a href="/course?id=1009" class="show-box">
                        <div class="sys-icon fl" style="background-image: url(./images/system/java.png);"></div>
                        <div class="title fl">
                            <h4>Java工程师</h4>
                            <p>综合就业率第一</p>
                        </div>
                    </a>
                    <a href="/course?id=1010" class="show-box">
                        <div class="sys-icon fl" style="background-image: url(./images/system/h5.png);"></div>
                        <div class="title fl">
                            <h4>前端工程师</h4>
                            <p>入门快、就业快、岗位多</p>
                        </div>
                    </a>
                    <a href="/course?id=1011" class="show-box">
                        <div class="sys-icon fl" style="background-image: url(./images/system/python.png);"></div>
                        <div class="title fl">
                            <h4>Python工程师</h4>
                            <p>应用领域最广泛</p>
                        </div>
                    </a>
                    <a href="/course?id=1012" class="show-box">
                        <div class="sys-icon fl" style="background-image: url(./images/system/web.png);"></div>
                        <div class="title fl">
                            <h4>web前端架构师</h4>
                            <p>培养前端P7级架构师</p>
                        </div>
                    </a>
                    <a href="/course?id=1013" class="show-box">
                        <div class="sys-icon fl" style="background-image: url(./images/system/java-s.png);"></div>
                        <div class="title fl">
                            <h4>Java架构师</h4>
                            <p>千万级电商架构0-100</p>
                        </div>
                    </a>
                    <div class="line"></div>
                    <a href="/course?id=1014" class="more-btn">
                        <div>体系课</div>
                        <div>
                            more
                            <span class="iconfont icon-angle-right"></span>
                        </div>
                    </a>
                </div>
            </div>
        </div>
        <!-- 课程分类和轮播图 结束 -->

        <!-- 限时拼团 开始 -->
        <div id="ms">
            <div class="ms-box w">
                <h3><img src="./images/cate/title-bg6.png" alt=""></h3>
                <div class="countdown-box">
                    <div class="countdown fl">
                        <h4>限时拼团</h4>
                        <div class="iconfont icon-shizhong"></div>
                        <p>拼团倒计时</p>
                        <div class="timer">
                            <div id="hour">17</div>
                            <span>:</span>
                            <div id="min">33</div>
                            <span>:</span>
                            <div id="sec">20</div>
                        </div>
                    </div>
                    <div class="ms-list fr">
                        <ul>
                            <li onclick='window.open("/course?id=1001")'>
                                <img src="./images/course/1.png" alt="">
                                <div class="title">笑傲Java面试</div>
                                <div class="difficulty">中级·255人</div>
                                <div class="price">
                                    <span>256</span>
                                </div>
                            </li>
                            <li onclick='window.open("/course?id=1002")'>
                                <img src="./images/course/2.png" alt="">
                                <div class="title">前端面试</div>
                                <div class="difficulty">中级·255人</div>
                                <div class="price">
                                    <span>256</span>
                                </div>
                            </li>
                            <li onclick='window.open("/course?id=1003")'>
                                <img src="./images/course/3.png" alt="">
                                <div class="title">数据可视化</div>
                                <div class="difficulty">中级·255人</div>
                                <div class="price">
                                    <span>256</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/course/4.png" alt="">
                                <div class="title">笑傲Java面试</div>
                                <div class="difficulty">中级·255人</div>
                                <div class="price">
                                    <span>256</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/course/5.png" alt="">
                                <div class="title">笑傲Java面试笑傲Java面试笑傲Java面试</div>
                                <div class="difficulty">中级·255人</div>
                                <div class="price">
                                    <span>256</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/course/6.png" alt="">
                                <div class="title">笑傲Java面试</div>
                                <div class="difficulty">中级·255人</div>
                                <div class="price">
                                    <span>256</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/course/7.png" alt="">
                                <div class="title">笑傲Java面试</div>
                                <div class="difficulty">中级·255人</div>
                                <div class="price">
                                    <span>256</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/course/8.png" alt="">
                                <div class="title">笑傲Java面试</div>
                                <div class="difficulty">中级·255人</div>
                                <div class="price">
                                    <span>256</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/course/1.png" alt="">
                                <div class="title">笑傲Java面试笑傲Java面试笑傲Java面试</div>
                                <div class="difficulty">中级·255人</div>
                                <div class="price">
                                    <span>256</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/course/2.png" alt="">
                                <div class="title">笑傲Java面试</div>
                                <div class="difficulty">中级·255人</div>
                                <div class="price">
                                    <span>256</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/course/3.png" alt="">
                                <div class="title">笑傲Java面试</div>
                                <div class="difficulty">中级·255人</div>
                                <div class="price">
                                    <span>256</span>
                                </div>
                            </li>
                            <li>
                                <img src="./images/course/4.png" alt="">
                                <div class="title">笑傲Java面试</div>
                                <div class="difficulty">中级·255人</div>
                                <div class="price">
                                    <span>256</span>
                                </div>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
        <!-- 限时拼团 结束 -->

        <!-- 新上好课 开始 -->
        <div id="course" class="bgfff">
            <div class="course-box w">
                <h3 class="title-pic">
                    <img src="./images/cate/title-bg3.png" alt="">
                    <a href="javascript:;" class="active">推荐</a>
                    <a href="javascript:;">前端课程</a>
                    <a href="javascript:;">后端课程</a>
                    <a href="javascript:;">精品免费</a>
                </h3>
                <div class="course">
                    <ul class="current">
                        <li onclick='window.open("/course?id=1001")'>
                            <img src="./images/course/1.png" alt="">
                            <div class="title">Java面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li onclick='window.open("/course?id=1002")'>
                            <img src="./images/course/2.png" alt="">
                            <div class="title">前端面试</div>
                            <div class="difficulty">初级·255人已报名</div>
                            <div class="price">￥299</div>
                        </li>
                        <li onclick='window.open("/course?id=1003")'>
                            <img src="./images/course/3.png" alt="">
                            <div class="title">数据可视化</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥869</div>
                        </li>
                        <li onclick='window.open("/course?id=1004")'>
                            <img src="./images/course/4.png" alt="">
                            <div class="title">vue3.0企业级应用</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥348</div>
                        </li>
                        <li onclick='window.open("/course?id=1005")'>
                            <img src="./images/course/5.png" alt="">
                            <div class="title">C语言系统化精讲</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li onclick='window.open("/course?id=1006")'>
                            <img src="./images/course/6.png" alt="">
                            <div class="title">Vue3从入门到实战</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥348</div>
                        </li>
                        <li onclick='window.open("/course?id=1007")'>
                            <img src="./images/course/7.png" alt="">
                            <div class="title">Java高级面试突围课</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥299</div>
                        </li>
                        <li onclick='window.open("/course?id=1008")'>
                            <img src="./images/course/8.png" alt="">
                            <div class="title">SpringBoot </div>
                            <div class="difficulty">初级·255人已报名</div>
                            <div class="price">￥388</div>
                        </li>
                    </ul>
                    <ul>
                        <li onclick='window.open("/course?id=1003")'>
                            <img src="./images/course/3.png" alt="">
                            <div class="title">数据可视化</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li onclick='window.open("/course?id=1004")'>
                            <img src="./images/course/4.png" alt="">
                            <div class="title">Vue企业级应用</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li onclick='window.open("/course?id=1005")'>
                            <img src="./images/course/5.png" alt="">
                            <div class="title">C语言精讲</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li onclick='window.open("/course?id=1006")'>
                            <img src="./images/course/6.png" alt="">
                            <div class="title">Vue入门到实战</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li onclick='window.open("/course?id=1007")'>
                            <img src="./images/course/7.png" alt="">
                            <div class="title">java高级面试突袭</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li onclick='window.open("/course?id=1008")'>
                            <img src="./images/course/8.png" alt="">
                            <div class="title">springboot</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li onclick='window.open("/course?id=1001")'>
                            <img src="./images/course/1.png" alt="">
                            <div class="title">Java面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li onclick='window.open("/course?id=1002")'>
                            <img src="./images/course/2.png" alt="">
                            <div class="title">前端面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <img src="./images/course/5.png" alt="">
                            <div class="title">Java面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li>
                            <img src="./images/course/6.png" alt="">
                            <div class="title">Java面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li>
                            <img src="./images/course/7.png" alt="">
                            <div class="title">Java面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li>
                            <img src="./images/course/8.png" alt="">
                            <div class="title">Java面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li>
                            <img src="./images/course/1.png" alt="">
                            <div class="title">Java面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li>
                            <img src="./images/course/2.png" alt="">
                            <div class="title">Java面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li>
                            <img src="./images/course/3.png" alt="">
                            <div class="title">Java面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li>
                            <img src="./images/course/4.png" alt="">
                            <div class="title">Java面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                    </ul>
                    <ul>
                        <li>
                            <img src="./images/course/7.png" alt="">
                            <div class="title">Java面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li>
                            <img src="./images/course/8.png" alt="">
                            <div class="title">Java面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li>
                            <img src="./images/course/1.png" alt="">
                            <div class="title">Java面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li>
                            <img src="./images/course/2.png" alt="">
                            <div class="title">Java面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li>
                            <img src="./images/course/3.png" alt="">
                            <div class="title">Java面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li>
                            <img src="./images/course/4.png" alt="">
                            <div class="title">Java面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li>
                            <img src="./images/course/5.png" alt="">
                            <div class="title">Java面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                        <li>
                            <img src="./images/course/6.png" alt="">
                            <div class="title">Java面试</div>
                            <div class="difficulty">中级·255人已报名</div>
                            <div class="price">￥256</div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- 新上好课 结束 -->

        <script src="./js/index.js"></script>
    </body>
</html>